Архітектура плагінів JavaScript Module Federation: Створення динамічної системи плагінів

У сучасному складному ландшафті веб-розробки створення модульних, масштабованих та легких у підтримці застосунків має вирішальне значення. Одним із потужних методів для досягнення цього є архітектура плагінів, де функціональність розбивається на незалежні, динамічно завантажувані модулі. JavaScript Module Federation, функція Webpack 5, надає надійний механізм для реалізації таких архітектур. Ця стаття заглиблюється в тонкощі використання Module Federation для створення динамічної системи плагінів.

Що таке Module Federation?

Module Federation дозволяє JavaScript-застосункам динамічно обмінюватися кодом під час виконання. Це означає, що модуль (фрагмент коду) з одного застосунку може бути використаний безпосередньо іншим застосунком без необхідності перезбирання чи повторного розгортання. Це досягається шляхом експортування та споживання модулів між різними збірками та навіть різними розгортаннями.

Традиційні методи спільного використання коду, такі як npm-пакети, вимагають перезбирання та повторного розгортання застосунків-споживачів щоразу, коли оновлюється спільна залежність. Module Federation усуває ці накладні витрати, що робить його ідеальним для сценаріїв, де потрібні часті оновлення та незалежні розгортання.

Чому варто використовувати Module Federation для архітектури плагінів?

Module Federation пропонує кілька переваг при створенні архітектури плагінів:

• Динамічне завантаження модулів: Плагіни можна завантажувати та вивантажувати під час виконання, що дозволяє застосункам адаптуватися до мінливих вимог без необхідності повного повторного розгортання.
• Роз'єднання: Плагіни розробляються та розгортаються незалежно, зменшуючи залежності між різними частинами застосунку.
• Масштабованість: Застосунок можна легко розширювати новими плагінами, не впливаючи на наявну функціональність.
• Легкість у підтримці: Плагіни можна оновлювати та підтримувати незалежно, зменшуючи ризик внесення помилок у ядро застосунку.
• Повторне використання коду: Плагіни можна повторно використовувати в кількох застосунках, що сприяє узгодженості та зменшує зусилля на розробку.
• Керування версіями та відкати: Ви можете керувати різними версіями плагінів і легко повертатися до попередніх версій за потреби.

Основні концепції: Контейнер-хост та віддалені контейнери

Module Federation обертається навколо двох ключових концепцій:

• Контейнер-хост: Основний застосунок, який споживає віддалені модулі (плагіни).
• Віддалений контейнер: Застосунок, який експортує модулі (плагіни) для споживання хостом.

Контейнер-хост динамічно завантажує файл віддаленої точки входу (remote entry file) з віддаленого контейнера, який містить маніфест експортованих модулів. Потім хост може отримувати доступ до цих модулів і використовувати їх так, ніби вони є частиною його власної кодової бази.

Реалізація динамічної системи плагінів з Module Federation: Покрокова інструкція

Давайте пройдемося по процесу створення простої системи плагінів за допомогою Module Federation. Ми створимо хост-застосунок і віддалений застосунок-плагін.

1. Налаштування хост-застосунку (контейнера-хоста)

Спочатку створіть новий каталог проєкту та ініціалізуйте новий npm-проєкт:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Встановіть Webpack та його залежності:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Створіть файл `webpack.config.js` у каталозі `host-app` з такою конфігурацією:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Пояснення:

• `name`: Назва хост-застосунку.
• `remotes`: Визначає віддалені контейнери, які буде споживати хост. У цьому випадку він споживає віддалений контейнер з назвою `plugin` з `http://localhost:3001/remoteEntry.js`. Синтаксис `Plugin@` означає, що `name` віддаленого ModuleFederationPlugin — це 'Plugin'.
• `shared`: Перелічує залежності, які є спільними між хостом та віддаленими контейнерами. Це запобігає завантаженню дублікатів цих залежностей. Використання `shared` є критично важливим для уникнення помилок та забезпечення належної функціональності плагіна.

Створіть каталог `src` і додайте файл `index.js` з таким вмістом:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Пояснення:

• Ми використовуємо `React.lazy` для динамічного імпорту `PluginComponent` з віддаленого `plugin`. Це вкрай важливо для лінивого завантаження плагіна та уникнення затримок при початковому завантаженні.
• Компонент `Suspense` використовується для обробки стану завантаження, поки плагін завантажується.

Створіть каталог `public` і додайте файл `index.html` з таким вмістом:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Додайте файл конфігурації Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Оновіть ваш `package.json` скриптом для запуску:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. Налаштування віддаленого застосунку (контейнера-плагіна)

Створіть новий каталог проєкту для плагіна:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Встановіть Webpack та його залежності:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Створіть файл `webpack.config.js` у каталозі `plugin-app` з такою конфігурацією:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Пояснення:

• `name`: Назва віддаленого контейнера (плагіна). Вона повинна збігатися з назвою, що використовується в конфігурації `remotes` хоста.
• `filename`: Назва файлу віддаленої точки входу, який буде завантажувати хост.
• `exposes`: Визначає модулі, які експортуються віддаленим контейнером. У цьому випадку ми експортуємо модуль `PluginComponent`. Ключ './PluginComponent' використовується в інструкції імпорту хоста (наприклад, `import('plugin/PluginComponent')`).
• `shared`: Так само, як і в хості, перелічує спільні залежності. Важливо, щоб спільні залежності та їхні версії були сумісними між хостом і віддаленим контейнером.

Створіть каталог `src` і додайте файл `PluginComponent.jsx` з таким вмістом:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Створіть файл `index.js` у каталозі `src`, щоб експортувати PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Створіть каталог `public` і додайте файл `index.html` з таким вмістом:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Додайте файл конфігурації Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Оновіть ваш `package.json` скриптом для запуску:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Запуск застосунків

Запустіть обидва застосунки, хост і плагін, виконавши `npm start` у їхніх відповідних каталогах.

Перейдіть на `http://localhost:3000` у вашому браузері. Ви повинні побачити хост-застосунок з динамічно завантаженим компонентом плагіна.

Розширені можливості та міркування

Керування версіями та відкати

Module Federation підтримує керування версіями, що дозволяє вам керувати різними версіями плагінів. Ви можете вказати обмеження версій у конфігурації `remotes` хоста. Наприклад:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

Це вказує хосту використовувати версію 1.0.0 плагіна. Якщо доступна новіша версія, хост продовжуватиме використовувати зазначену версію до явного оновлення. Впровадження надійного керування версіями є критично важливим для запобігання критичним змінам та забезпечення стабільності застосунку.

Аспекти безпеки

При використанні Module Federation безпека є першочерговою. Враховуйте наступне:

• Автентифікація та авторизація: Впроваджуйте належні механізми автентифікації та авторизації, щоб гарантувати, що лише авторизовані користувачі можуть отримувати доступ до плагінів і використовувати їх.
• Цілісність коду: Перевіряйте цілісність віддалених модулів, щоб запобігти впровадженню шкідливого коду в застосунок. Розгляньте використання Content Security Policy (CSP) для обмеження джерел, з яких застосунок може завантажувати ресурси.
• Керування залежностями: Ретельно керуйте залежностями як хоста, так і віддалених контейнерів, щоб уникнути вразливостей. Регулярно оновлюйте залежності до останніх версій.
• Валідація вхідних даних: Перевіряйте всі дані, отримані від віддалених модулів, щоб запобігти атакам типу ін'єкції.
• CORS (Cross-Origin Resource Sharing): Правильно налаштуйте CORS, щоб дозволити хост-застосунку доступ до файлу віддаленої точки входу з застосунку-плагіна.

Виявлення та керування плагінами

Для більш складних систем плагінів вам може знадобитися механізм для виявлення та керування плагінами. Це можна досягти за допомогою реєстру плагінів або служби виявлення. Центральний реєстр може зберігати інформацію про доступні плагіни, включаючи їхнє місцезнаходження, версію та залежності. Хост-застосунок може потім запитувати реєстр, щоб знайти та завантажити відповідні плагіни.

Розгляньте такі підходи:

• Централізована конфігурація: Зберігайте URL-адреси плагінів у центральному конфігураційному файлі (наприклад, JSON-файлі), який хост-застосунок зчитує під час виконання. Це дозволяє легко додавати, видаляти або оновлювати плагіни без повторного розгортання хост-застосунку.
• Виявлення на основі API: Створіть API-ендпоінт, який повертає список доступних плагінів. Хост-застосунок може потім отримати цей список і динамічно завантажити плагіни.
• Архітектура, керована подіями: Використовуйте шину подій або чергу повідомлень, щоб сповіщати хост-застосунок про появу нових плагінів. Це дозволяє асинхронне виявлення та завантаження плагінів.

Динамічна конфігурація та активація плагінів

Дозволити користувачам динамічно конфігурувати та активувати плагіни — це потужна функція. Це вимагає механізму для зберігання та керування конфігураціями плагінів. Ви можете використовувати базу даних, конфігураційний файл або хмарну службу конфігурації для зберігання налаштувань плагінів. Хост-застосунок може потім зчитувати ці налаштування під час виконання та активувати плагіни відповідно. Розгляньте можливість надання користувацького інтерфейсу для керування конфігураціями плагінів.

Обробка асинхронних операцій та помилок

При роботі з динамічно завантажуваними плагінами важливо коректно обробляти асинхронні операції та помилки. Використовуйте `async/await` або Promises для керування асинхронним кодом. Впроваджуйте належну обробку помилок, щоб перехоплювати та реєструвати будь-які помилки, що виникають під час завантаження або виконання плагіна. Надавайте користувачеві інформативні повідомлення про помилки. Розгляньте використання централізованої служби логування помилок для відстеження помилок у всіх плагінах.

Розділення коду та оптимізація продуктивності

Для оптимізації продуктивності використовуйте розділення коду (code splitting), щоб розбити застосунок і плагіни на менші частини. Це дозволяє браузеру завантажувати лише той код, який необхідний для конкретної сторінки чи функції. Webpack надає вбудовану підтримку для розділення коду. Розгляньте використання лінивого завантаження (lazy loading) для завантаження плагінів лише тоді, коли вони потрібні. Мініфікуйте та стискайте код, щоб зменшити розмір файлів.

Тестування та безперервна інтеграція

Ретельно тестуйте свою систему плагінів, щоб переконатися, що вона працює коректно. Пишіть юніт-тести, інтеграційні тести та наскрізні тести. Використовуйте систему безперервної інтеграції (CI) для автоматичного запуску тестів при кожній зміні коду. Впроваджуйте конвеєр безперервної доставки (CD) для автоматизації розгортання застосунку та плагінів.

Приклади з реального світу та випадки використання

Module Federation використовується в різноманітних реальних застосунках, зокрема:

• Платформи електронної комерції: Динамічне завантаження рекомендацій товарів, платіжних шлюзів та постачальників послуг доставки. Наприклад, глобальна платформа електронної комерції може використовувати Module Federation для інтеграції різних платіжних провайдерів залежно від місцезнаходження клієнта. У Північній Америці вона може завантажувати плагін для Stripe, а в Європі — плагін для PayPal або Klarna.
• Системи керування контентом (CMS): Дозволяє користувачам встановлювати та активувати плагіни для розширення функціональності CMS. CMS може дозволяти користувачам встановлювати плагіни для SEO-оптимізації, інтеграції з соціальними мережами або аналітики контенту.
• Дашборди та аналітичні платформи: Динамічне завантаження різних віджетів та візуалізацій. Глобальна аналітична платформа може завантажувати плагіни для різних джерел даних, таких як Google Analytics, Adobe Analytics або Salesforce.
• Мікрофронтендні архітектури: Побудова великомасштабних веб-застосунків як колекції незалежно розгортаних мікрофронтендів. Велика корпорація може використовувати Module Federation для побудови свого веб-застосунку як колекції мікрофронтендів, кожен з яких відповідає за певну бізнес-функцію, таку як керування обліковими записами, каталог продукції або обробка замовлень.
• Системи дизайну: Спільне використання UI-компонентів та токенів дизайну між кількома застосунками. Глобальна організація з кількома брендами може використовувати Module Federation для спільного використання загальної системи дизайну у всіх своїх застосунках, забезпечуючи узгодженість та зменшуючи зусилля на розробку.

Найкращі практики для створення динамічних систем плагінів з Module Federation

Ось деякі найкращі практики, які слід враховувати при створенні динамічних систем плагінів з Module Federation:

• Робіть плагіни маленькими та сфокусованими: Кожен плагін повинен відповідати за певну частину функціональності. Це полегшує підтримку та оновлення плагінів.
• Визначайте чіткі інтерфейси плагінів: Визначайте чіткі інтерфейси для взаємодії плагінів з хост-застосунком. Це забезпечує сумісність плагінів з хостом і запобігає критичним змінам.
• Використовуйте семантичне версіонування: Використовуйте семантичне версіонування для керування версіями ваших плагінів. Це полегшує відстеження змін та забезпечення сумісності.
• Надавайте документацію: Надавайте чітку та стислу документацію для ваших плагінів. Це допомагає користувачам зрозуміти, як встановлювати, налаштовувати та використовувати плагіни.
• Впроваджуйте найкращі практики безпеки: Дотримуйтесь найкращих практик безпеки для захисту вашого застосунку та плагінів від вразливостей.
• Моніторте продуктивність плагінів: Відстежуйте продуктивність ваших плагінів для виявлення будь-яких вузьких місць. Оптимізуйте код для покращення продуктивності.
• Автоматизуйте розгортання: Автоматизуйте розгортання вашого застосунку та плагінів. Це зменшує ризик помилок і забезпечує швидке розгортання оновлень.
• Використовуйте узгоджений стиль кодування: Забезпечуйте узгоджений стиль кодування у всіх плагінах. Це робить код легшим для читання та підтримки.
• Пишіть юніт-тести: Пишіть юніт-тести для ваших плагінів, щоб переконатися, що вони працюють коректно.
• Використовуйте лінтер: Використовуйте лінтер для автоматичної перевірки вашого коду на наявність помилок.

Висновок

JavaScript Module Federation надає потужний і гнучкий механізм для створення динамічних систем плагінів. Використовуючи Module Federation, ви можете створювати модульні, масштабовані та легкі у підтримці застосунки, які можуть адаптуватися до мінливих вимог. Дотримуючись найкращих практик, викладених у цій статті, ви можете створювати надійні та безпечні системи плагінів, які відповідають потребам вашої організації.

Ця технологія є особливо цінною в міжнародних контекстах, дозволяючи бізнесам адаптувати свої програмні продукти до конкретних регіонів або сегментів клієнтів без розгортання повністю окремих застосунків. Від інтеграції місцевих платіжних шлюзів до надання контенту для конкретного регіону, Module Federation сприяє більш персоналізованому та ефективному користувацькому досвіду в усьому світі.